<script setup>
import { ref,onMounted } from 'vue'
import { getUserListApi,updateUserApi,deleteUserApi,registerApi,searchUserApi } from "../../api/index.js";
import { ElMessage } from "element-plus";

const searchName = ref({
  username: '',
});

//添加用户
const UserData = ref({
  username: '',
  password: '',
  email: '',
});

const Search = async () => {
  // 这里可以添加搜索逻辑
  console.log(searchName.value.username)
  const {data: res} = await searchUserApi(searchName.value.username)
  // console.log(res.data)
  Userlist.value = res.data
  // console.log(Userlist.value[0])
  if (Userlist.value[0]==undefined){
    ElMessage({
      message: '无数据',
      type: 'error',
    })
    GetUserList()
    }else{
      Reset();
      ElMessage({
        message: '查找成功',
        type: 'success',
      })
    }
  }


const Reset = () => {
  searchName.value.username = '';
};
//dialog弹窗
const addUserDialogVisible = ref(false);
const editUserDialogVisible = ref(false);
const deleteUserDialogVisible = ref(false);

const userAdd = async () => {
  // 添加用户的逻辑
  const {data:res} = await registerApi(UserData.value)
  if(res.code == 200){
    GetUserList();
  }
  console.log('添加用户:', UserData.value);
  addUserDialogVisible.value = false;
};

//批量删除
const DeleteAll = (index, row) => {
  // 这里可以添加删除用户的逻辑
  console.log(index, row);
};

//用户编辑
const UserDataEditor = ref({}); // 初始化为空对象
const Edit = async () => {
  const {data:res} = await updateUserApi(UserDataEditor.value.value)
  if(res.code == 200){
    GetUserList();
    ElMessage({
      message: '修改成功',
      type: 'success',
    });

  }else{
    ElMessage({
      message: '修改失败',
      type: 'error',
    });
  }
  editUserDialogVisible.value = false;
};

// 删除用户
const UserDataDelete = ref({});
const userDelete = async () => {
  console.log('删除用户:', UserDataDelete.value.value.id)
  const {data:res} = await deleteUserApi(UserDataDelete.value.value.id)
  console.log(res)
  if(res.code == 200){
    GetUserList();
    ElMessage({
      message: '删除成功',
      type: 'success',
    });

  }else{
    ElMessage({
      message: '删除失败',
      type: 'error',
    });
  }
  deleteUserDialogVisible.value = false;
};
//用户列表
const  GetUserList = async () => {
  // 这里可以添加获取用户列表的逻辑
  const {data:res} = await getUserListApi();
  console.log(res.data);
  Userlist.value = res.data;
  // console.log(Userlist);
};
const Userlist = ref([])

const GetAll=()=>{
  GetUserList();
  ElMessage.success('获取全部用户成功')
}
onMounted(() => {
  GetUserList();
})
</script>

<template>
  <div>
    <el-card>
      <el-row>
        <!-- 搜索框 --->
        <el-col :span="4">
          <el-form :model="search" label-width="80px">
            <el-form-item label="用户名称">
              <el-input v-model="searchName.username" placeholder="请输入用户名" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="Search" style="margin-left: 20px">搜索</el-button>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" @click="Reset">重置</el-button>
        </el-col>

        <el-col :span="10">
          <el-form></el-form>
        </el-col>
      </el-row>
      <!-- 操作 --->
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="addUserDialogVisible = true">添加用户</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="DeleteAll">批量删除</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="GetAll">获取全部</el-button>
        </el-col>
        <el-col :span="18">
          <el-form></el-form>
        </el-col>
      </el-row>

      <!-- 用户列表 --->
      <el-scrollbar height="500px">
        <el-card style="margin-top: 20px">
          <el-table :data="Userlist" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column label="头像" width="180">
              <template #default="scope">
                <el-avatar :src="scope.row.image" size="large"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="password" label="密码" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" @click="editUserDialogVisible = true;UserDataEditor.value={...scope.row}">
                  编辑
                </el-button>
                <el-button
                    size="small"
                    type="danger"
                    plain
                    @click="deleteUserDialogVisible=true;UserDataDelete.value={...scope.row}"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-scrollbar>
      </el-card>

    <!-- 添加用户对话框 -->
    <el-dialog title="添加用户" v-model="addUserDialogVisible" width="30%">
      <el-form :model="UserData">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="UserData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="UserData.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="120px">
          <el-input v-model="UserData.email"></el-input>
        </el-form-item>
        <!-- 其他表单项... -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="userAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑用户对话框 -->
    <el-dialog title="编辑用户" v-model="editUserDialogVisible" width="30%">
      <el-form :model="UserDataEditor">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="UserDataEditor.value.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="120px">
          <el-input v-model="UserDataEditor.value.email"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="Edit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除用户对话框 -->
    <el-dialog title="提示" v-model="deleteUserDialogVisible" width="30%">
      <el-form>
        <el-form-item label="确定删除该用户吗？" label-width="120px">
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="userDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 添加样式以匹配图片中的样式 */
</style>
